<template>
	<view class="container" v-if="commandData">
		<block>
			<!-- 循环 -->
			<view class="container-box-item">
				<el-dropdown size="mini" split-button type="primary">
					<view class="" style="width: 100rpx;">
						<view>{{ name }}</view>
					</view>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item v-for="(item,key) in selectData" >
							<view class="" @click="setType(item)" >
								{{ item.v }}
							</view>
						</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		name: 'Master',
		props: {
			selectData: {
				type: Array,
				default: () => {
					return ["无", "默认", "短", "长"]
				}
			},
			selectType:{
				type: [String, Number],
				default: "default"
			},
			command:{
				type: [String, Number],
				default: "default"
			}
			
		},
		data() {
			return {
				name: "",
				commandData:"",
			}
		},
		created() {
			this.setSelect()
		},
		methods: {
			setType(val) {
				console.log(val);
				this.name = val.v
				this.$emit('itemSelect',this.selectType,val.k)
			},
			setSelect(){
				this.selectData.forEach(item=>{
					if(item.k == this.commandData){
						this.name=item.v
						return
					}
				})
			}
		},
		watch:{
			command: {
				handler(n,o) {
					this.commandData = n
					this.setSelect()
				},
				immediate: true
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
